<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 第二个函数 reduce, reduce也是循环遍历数组，但是reduce不是返回一下数组，而是只返回一个结果值，它会把每一个循环的return的值，也会给到下一次循环里进行使用
     * 查看源码有三钟参数情况
     * reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
     * reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
     * reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
     *
     * 说一下参数是什么意思
     * @param previousValue: U ，这个分情况，有initialValue值的时候，previousValue就是initialValue值，没有就是数组的第一个数
     * @param currentValue: T 数组的下一个值，这个分情况，有initialValue值的时候，currentValue就是数组的第一个数，没有就是数组的第二个数（因为第一个值被previousValue拿了）
     * @param currentIndex: number 当前数组的索引值（是currentValue所在位置）
     * @param array: T[] 当前数组所有值
     * @param initialValue: U 初始化值
     **/

    //需求数组数据
    let strData = [5, 30, 40, 60, 110, 250, 20, 900, 80];
    /**
     * 第一种使用参数值说明：reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
     * 没有初始化值
     * previousValue是数组第一值，类型：数组数据类型
     * currentValue是数组第二值，类型：数组数据类型
     * currentIndex 当前数组的索引值（是currentValue所在位置）
     * array: 当前数组所有值
     * 返回值类型：数组数据类型
     */

    let total1 = strData.reduce((previousValue, currentValue, currentIndex, array) => {
        console.log("previousValue:" + previousValue +
            ",currentValue:" + currentValue +
            ",currentIndex:" + currentIndex +
            ",array:" + array);
        return previousValue + currentValue;
    });
    //输出：total:1495
    console.log("第一种使用参数值 total1:" + total1);

    /**
     * 第二和第三种使用参数值说明：
     * reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
     * reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
     *
     * initialValue：初始化值
     * previousValue是初始化值，类型：初始化值的数据类型
     * currentValue是数组第二值，类型：数组的数据类型
     * currentIndex 当前数组的索引值（是currentValue所在位置）
     * 返回类型：初始化值的数据类型
     */
    let total2 = strData.reduce((previousValue, currentValue, currentIndex, array) => {
        console.log("previousValue:" + previousValue +
            ",currentValue:" + currentValue +
            ",currentIndex:" + currentIndex +
            ",array:" + array);
        return previousValue + currentValue;
    }, 100000);
    //输出：total:101495
    console.log("第二种使用参数值 total2:" + total2);

    //还有reduceRight从倒序循环遍历
    let total3 = strData.reduceRight((previousValue, currentValue, currentIndex, array) => {
        console.log("previousValue:" + previousValue +
            ",currentValue:" + currentValue +
            ",currentIndex:" + currentIndex +
            ",array:" + array);
        return previousValue + currentValue;
    }, 100000);
    //输出：total:101495
    console.log("第二种使用参数值 total3:" + total3);

    let str1 = strData.reduce((previousValue, currentValue, currentIndex, array) => {
        console.log("previousValue:" + previousValue +
            ",currentValue:" + currentValue +
            ",currentIndex:" + currentIndex +
            ",array:" + array);
        return previousValue + currentValue.toString();
    }, 'str:');
    //输出：total: str:53040601102502090080
    console.log("第三种使用参数值 字符串拼接:" + str1);


    // 根据reduce这种情况，比如：我们就做一个数组累加/求和，就很方便了
    // 现在有一个要求就是数组的数据求和
    // 1.传统写法
    let totalNum = 0;
    for (let i = 0; i < strData.length; i++) {
        totalNum += strData[i];
    }
    console.log("传统求和写法 totalNum:" + totalNum);
    //2.使用reduce求和
    let totalNum1 = strData.reduce((previousValue, currentValue, currentIndex, array) => {
        return previousValue + currentValue;
    })
    console.log("reduce求和 totalNum1:" + totalNum1);

    //3.对reduce简洁一点使用（推荐），这里需要注意的：参数没有用到可以，可以不写，但是参数的顺序是不能变的，就是你要用currentIndex，那你必须要用三个参数，不能只写两个
    let totalNum2 = strData.reduce((previousValue, currentValue) => {
        return previousValue + currentValue;
    })
    console.log("reduce求和 totalNum2:" + totalNum2);

</script>
</html>
